<html xmlns="http://www.w3.org/1999/xhtml">

<head>
    <meta http-equiv="X-UA-Compatible" content="chrome=1;IE=edge">
    <meta name="viewport" content="user-scalable=no">
    <!-- vue2 -->
    <script src="/examples/js/vue.min.js"></script>
    <!-- 示例演示-公共样式 -->
    <link rel="stylesheet" href="/examples/css/railView.css" type="text/css" />
    <!-- 引入样式 -->
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <!-- 引入组件库 -->
    <script src="https://unpkg.com/element-ui/lib/index.js"></script>
    <!-- RailUnit 样式 -->
    <link rel="stylesheet" href="/RailUnit/RailUnit.umd.css" type="text/css">
    <!-- RailUnit 插件 -->
    <script type="text/javascript" src="/RailUnit/RailUnit.umd.js" charset="utf-8"></script>
    <style>
        .roam-container {
            z-index: 99;
            position: absolute;
            top: 40px;
            left: 48px;
            background: rgba(255, 255, 255, 0.8);
            color: #FFFFFF;
            border-radius: 3px;
            box-shadow: 0 0 10px rgba(34, 45, 50, 0.7);
        }

        .roam-container>.oprate-content {
            padding: 20px 30px;
            display: flex;
            flex-direction: column;
            justify-content: space-between;
        }

        .oprate-item {
            width: 100%;
            margin-top: 10px;
            display: flex;
            align-items: center;
            height: 25px;
            line-height: 25px;
        }

        .oprate-item>span {
            color: black;
        }

        .oprate-item:nth-child(1) {
            margin-top: 0;
        }

        .btnGroup button {
            background: #45a3ff;
            border: 0;
            border-radius: 4px;
            height: 25px;
            width: 70px;
            text-align: center;
            color: #FFFF;
            margin-right: 10px;
        }

        .btnGroup button:last-child {
            margin-right: 0;
        }

        .freeRoam-oprate {
            height: 50px;
            position: absolute;
            bottom: 14px;
            left: 426px;
            color: #FFFFFF;
            background: rgba(34, 45, 50, 0.7);
            display: flex;
            justify-content: space-between;
            border-radius: 4px;
            transform: translateX(-300%);
        }

        .subitem {
            position: relative;
            display: flex;
            align-items: center;
            padding: 0 20px;
        }

        .subitem:last-child::before {
            content: '';
            position: absolute;
            left: 0;
            width: 1px;
            height: 80%;
            background-color: rgba(160, 160, 160, 0.5);
        }

        .tip {
            position: absolute;
            top: 4px;
            width: max-content;
            z-index: 99;
            color: red;
            display: none;
            height: 30px;
            line-height: 30px;
        }

        .shortcutKey {
            color: #45a3ff;
            padding-left: 1em;
            cursor: pointer;
        }
    </style>
</head>

<body>
    <div id="app">
        <div id="buttom-container">
            <el-button type="info" @click="showPathRoam = true">路径漫游</el-button>
            <el-button type="info" id="gravityBtn" @click="handleGravityRoma">重力漫游</el-button>
            <span class="tip" v-show="tip">请按V键开启碰撞检测（只针对IFC模型）<span class="shortcutKey"
                    @click="showExplain = !showExplain">操作快捷键说明</span></span>
        </div>
        <div id="viewer" style="width:100%;height:100%;position:relative;float:left"></div>
        <div class="roam-container" v-show="showPathRoam">
            <div class="head">
                <span>漫游设置</span>
                <span @click="showPathRoam = !showPathRoam" style="cursor: pointer">&#10005;</span>
            </div>
            <div class="oprate-content">
                <div class="oprate-item">
                    <span>循环：</span>
                    <el-checkbox v-model="isLoop"></el-checkbox>
                </div>
                <div class="oprate-item">
                    <span>速度：</span>
                    <el-input-number v-model="speed" :min="1" :max="16"></el-input-number>
                </div>
                <div class="oprate-item btnGroup">
                    <button @click="handleStart">开始</button>
                    <button @click="handlePause">暂停</button>
                    <button @click="handleGoOn">继续</button>
                    <button @click="handleStop">停止</button>
                </div>
            </div>
        </div>
        <div class="roam-container" v-show="showExplain">
            <div class="head">
                <span>操作快捷键说明</span>
                <span @click="showExplain = !showExplain" style="cursor: pointer">&#10005;</span>
            </div>
            <div class="oprate-content" style="padding: 0">
                <img src="/examples/img/keyDescription.png" alt="" srcset="">
            </div>
        </div>
    </div>
    <script id="viewerStartup" type="module">
        const vm = new Vue({
            el: '#app',
            data: {
                bimViewer: null,
                isLoop: false,
                speed: 5,
                showPathRoam: false,
                tip: false,
                showExplain: false
            },
            mounted() {
                this.bimViewerFn()
            },
            methods: {
                // 初始化模型
                bimViewerFn() {
                    this.bimViewer = new MyViewer({
                        serverUrl: '/RailUnit/',
                        containerElement: document.getElementById('viewer'),
                        nodeVisible: false
                    })
                    this.bimViewer.loadModel2('jianzhu')
                },
                handleStart() {
                    const positions = [
                        {
                            "eye": [
                                10.449999809265137,
                                17.3799991607666,
                                -98.30999755859375
                            ],
                            "look": [
                                43.09000015258789,
                                0.5,
                                -26.760000228881836
                            ],
                            "up": [
                                0.05999999865889549,
                                0.9599999785423279,
                                0.1599999964237213
                            ]
                        },
                        {
                            "eye": [
                                49.10879898071289,
                                9.237162590026855,
                                -99.9477310180664
                            ],
                            "look": [
                                49.10879898071289,
                                9.237162590026855,
                                -29.48837661743164
                            ],
                            "up": [
                                0,
                                1,
                                0
                            ]
                        },
                        {
                            "eye": [
                                98.93108367919922,
                                9.237162590026855,
                                -79.31066131591797
                            ],
                            "look": [
                                49.10879898071289,
                                9.237162590026855,
                                -29.48837661743164
                            ],
                            "up": [
                                0,
                                1,
                                0
                            ]
                        }]
                    console.log('开始漫游', this.speed, this.isLoop);
                    this.bimViewer.activeRouteRoam(positions, { playingRate: this.speed });
                    this.bimViewer.playRoma();

                },
                handlePause() {
                    this.bimViewer.pauseRoma()
                    console.log('暂停漫游', this.bimViewer.pauseRoma());
                },
                handleGoOn() {
                    this.bimViewer.resumeRoma();
                },
                handleStop() {
                    this.bimViewer.stopRoma()
                    console.log('停止漫游', this.bimViewer.stopRoma());
                },
                // 重力漫游
                handleGravityRoma() {
                    const gravityBtn = document.getElementById("gravityBtn")
                    if (gravityBtn.innerText === "重力漫游") {
                        this.bimViewer.gravityRoma({
                            avatarColor: { r: 255, g: 255, b: 255 },
                            avatarOutlineColor: { r: 153, g: 153, b: 153 },
                            avatarOpacity: 0.9,
                            avatarScale: 1.5,
                            backgroundColor: { r: 51, g: 51, b: 51 },
                            backgroundOpacity: 0.8,
                            walkSpeed: 50,
                            zoomSpeed: 30,
                            rotationSpeed: 3,
                            elevationSpeed: 5
                        });
                        gravityBtn.innerText = "取消重力漫游"
                        this.tip = true
                    } else {
                        this.bimViewer.cancelGravityRoma();
                        gravityBtn.innerText = "重力漫游"
                        this.tip = false
                    }
                }
            }
        })
    </script>
</body>

</html>